<template>
	<view class="container">
		<tui-tips v-if="noData" :fixed="false" imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-tips>
		<checkbox-group class="check-box-group">
			<view v-for="(item,index) in goodsCartList" :key="index" class="tui-cart-cell  tui-mtop">
				<view class="tui-activity">
					<view class="tui-bold"><tui-icon name="shop" :size="18" style="margin-right:10rpx;" color="#ff5800"></tui-icon>{{item.shop_name}}</view>
					<!-- <view class="tui-buy">进店铺<tui-icon name="arrowright" :size="18" color="#333"></tui-icon></view> -->
				</view>
				<view v-for="(row,idx) in item.goods_list" :key="idx" :class="{'tui-invalid-ptop':idx!==0}">
					<tui-swipe-action :actions="actions" @click="handlerButton" :params="row">
						<template v-slot:content>
							<view class="tui-goods-item">
								<label class="tui-checkbox">
									<checkbox color="#fff" @click="doCheckOne(index, idx, row.goods_check)" :checked="row.goods_check == 1 ? true : false"></checkbox>
								</label>
								<image :src="row.img_logo" @tap="goGoodsView(row.goods_id)" class="tui-goods-img"/>
								<view class="tui-goods-info" >
									<view class="tui-goods-title" @tap="goGoodsView(row.goods_id)">{{row.goods_name}}</view>
									<view v-if="(row.goods_format > 0 )" class="tui-goods-model">
										<view class="tui-model-text">{{row.goods_format_name}}</view>
									</view>
									<view v-if="false" class="tui-goods-price-gold">￥ {{row.money_original}}</view>
									<view class="tui-price-box">
										<view class="tui-goods-price">￥{{row.money}}</view>
										<view class="tui-scale">
											<tui-numberbox :value="row.goods_num" :height="50" :width="80" :min="1" :max="row.stock" :index="idx" :custom="index" @change="changeNum"></tui-numberbox>
										</view>
									</view>
								</view>
							</view>
						</template>
					</tui-swipe-action>
				</view>
			</view>
		</checkbox-group>

		<!--猜你喜欢-->

		<tui-divider :size="28" :bold="true" color="#333" width="50%">
			<tui-icon name="like" :size="18" color="#e41f19"></tui-icon>
			<text class="tui-youlike">猜你喜欢</text>
		</tui-divider>
		
		<view class="tui-product-list">
			<view class="tui-product-container">
				<block v-for="(item,index) in goodsPromList" :key="index" v-if="(index+1)%2!=0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="goGoodsView(item.id)">
						<image :src="item.img_logo" class="tui-pro-img" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{item.name}}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{item.money}}</text>
									<text class="tui-factory-price">{{item.money_original}}</text>
								</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
			<view class="tui-product-container">
				<block v-for="(item,index) in goodsPromList" :key="index" v-if="(index+1)%2==0">
					<!--商品列表-->
					<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="goGoodsView(item.id)">
						<image :src="item.img_logo" class="tui-pro-img" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{item.name}}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{item.money}}</text>
									<text class="tui-factory-price">{{item.money_original}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!--tabbar-->
		<view class="tui-tabbar-cart">
			<view class="tui-checkAll">
				<checkbox-group @change="doCheckAll">
					<label class="tui-checkbox">
						<checkbox color="#fff" value="all" :checked="isCheckAll==1 ? true : false "></checkbox>
						<text class="tui-checkbox-pl">全选</text>
					</label>
				</checkbox-group>
				<view class="tui-total-price">
					合计:<text class="tui-bold">￥{{moneyTotal}}</text>
					<!-- <view class="free-money">促销减100</view> -->
				</view>
			</view>
			<view>
				<tui-button width="200rpx" height="70rpx" :size="30" type="danger" shape="circle" @click="doOrderSubmit">去结算({{goodsTotal}})</tui-button>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
	</view>
</template>

<script>
	import tuiSwipeAction from "@/components/thorui/tui-swipe-action/tui-swipe-action"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox"
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiDivider from "@/components/thorui/tui-divider/tui-divider"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiTips from "@/components/thorui/tui-tips/tui-tips"

	export default {
		components: {
			tuiSwipeAction,
			tuiButton,
			tuiNumberbox,
			footerMenu,
			tuiIcon,
			tuiDivider,
			tuiLoadmore,
			tuiTips,
		},
		data() {
			return {
				moneyTotal: 0,	//总金额
				goodsTotal: 0,	//总产品数	
				isCheckAll: 0,
				
				goodsCartList: [],
				goodsPromList: [],
				
				noData: false,
				loadding: false,
				pullUpOn: true,
				
				actions: [
					{name: '收藏', width: 64, color: '#fff', fontsize: 28, background: '#FFC600' },
				/*  {name: '看相似', color: '#fff', fontsize: 28, width: 64, background: '#FF7035' }, */
					{name: '删除', color: '#fff',fontsize: 28, width: 64, background: '#F82400'}
				],
			}
		},
		methods: {
			//购买数量变化
			changeNum: function(e) {
				this.goodsCartList[e.custom]['goods_list'][e.index].goods_num = e.value;
				this.doSumTotalMoney();
			},
			
			//收藏-移除购物车
			handlerButton: function(e) {
				let index = e.index;
				let item = e.item;
				if(index == 0) {	//收藏商品
					this.postMyGoodsLikeAdd(item.goods_id);
				}
				if(index == 1) {	//删除-移除购物车
					this.postMyCartGoodsDel(item.id);
				}
				/* this.tui.toast(`记录id：${item.id}，按钮index：${index}`); */
			},
			
			//选中单个商品
			doCheckOne: function(shopIdx, goodsIdx, isCheckOne) {
				let checkFlag = (isCheckOne == 0) ? 1 : 0;
				this.goodsCartList[shopIdx].goods_list[goodsIdx].goods_check = checkFlag;
				this.doSumTotalMoney();
			},
			
			//全选-全不选
			doCheckAll: function(e) {
				this.isCheckAll = !this.isCheckAll;
				let checkFlag = (this.isCheckAll == true) ? 1 : 0;
				this.goodsCartList.forEach(function (shopInfo,index){
					let shopGoodsList = shopInfo.goods_list;
					shopGoodsList.forEach(function (goodsInfo, idx){
						goodsInfo.goods_check = checkFlag;
					});
				});
				this.doSumTotalMoney();
			},
			
			//计算总金额
			doSumTotalMoney: function() {
				let moneySum = 0;
				let goodsSum = 0;
				this.goodsCartList.forEach(function (shopInfo,index){
					let shopGoodsList = shopInfo.goods_list;
					shopGoodsList.forEach(function (goodsInfo, idx){
						if(goodsInfo.goods_check == 1) {	//商品选中
							let moneyItem = goodsInfo.goods_num * goodsInfo.money;
							moneySum += moneyItem;
							goodsSum += goodsInfo.goods_num;
						}
					});
				});
				this.moneyTotal = moneySum;
				this.goodsTotal = goodsSum;
			},
			
			doOrderSubmit: function() {
				if(this.goodsTotal == 0 ){
					this.tui.toast('请选择你需要购买的产品', 2000, false);
					return;
				}
				this.tui.toast('优惠信息下单后自动扣除', 2000, false);
				this.postMyCartOrderSubmit();
			},
			
			//商品详情页面
			goGoodsView:function(e) {
				uni.navigateTo({
					url: '/pages/goods/view?id='+ e
				})
			},
			
			//得到购物车里面的商品数据
			getGoodsCartList: function() {
				uni.request({
					url: this.$apiUrl + '/api/my-cart/goods-list',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {},
					success: (res) => {
						this.goodsCartList = res.data['data'];
						if(this.goodsCartList == 0) {
							this.noData = true;
						}
						console.log(this.goodsCartList);
					}
				});
			},
			
			//得到推荐商品
			getGoodsPromList: function() {
				uni.request({
					url: this.$apiUrl + '/api/goods/prom-cart',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {},
					success: (res) => {
						this.goodsPromList = res.data['data'];
					}
				});
			},
			
			//产品加入收藏
			postMyGoodsLikeAdd: function(goodsId) {
				uni.request({
					url: this.$apiUrl+ '/api/my-goods/like-add',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						goods_id: goodsId
					},
					success: (res) => {
						let resMsg = res.data['msg'];
						this.tui.toast(resMsg, 2000, false);
					}
				});
			},
			
			//产品移除购物车
			postMyCartGoodsDel: function(infoId) {
				uni.request({
					url: this.$apiUrl+ '/api/my-cart/goods-del',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: { info_id: infoId },
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						this.tui.toast(resMsg, 2000, false); 
						this.getGoodsCartList();
					}
				});
			},
			
			//购物车提交订单
			postMyCartOrderSubmit: function(){
				uni.request({
					url: this.$apiUrl+ '/api/my-cart/order-submit',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						goods_list: JSON.stringify(this.goodsCartList),
					},
					success: (res) => {
						let resErr = res.data['error'];
						if(resErr == 0 ) {
							let prepayId = res.data['data'];		//预支付订单的ID
							uni.navigateTo({
								url: '/pages/my-order/prepay?prepay_id=' + prepayId
							});
						}else{
							let resMsg = res.data['msg'];
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
			
		},
		
		onLoad: function(options) {	
			if(!uni.getStorageSync('hasLogin')) {
				uni.navigateTo({ url: '/pages/my/login' })
			}

			this.getGoodsCartList();
			this.getGoodsPromList();
		},
		
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
			uni.stopPullDownRefresh()
		},
		
		onReachBottom: function() {
		//	this.tui.toast("试试商品搜索的功能吧~")
			return;
		},

	}
</script>

<style>
	.container {
		padding-bottom: 240rpx;
	}

	.tui-mtop {
	 	margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-goods-num {
		font-weight: bold;
		color: #e41f19;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin: 20rpx;
	}

	.tui-checkbox {
		/* width: 40rpx; */
		padding-right: 30rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef APP-PLUS || MP */
	.tui-checkbox .wx-checkbox-input {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin: 0;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #F82400;
		width: 40rpx;
		height: 40rpx;
		border: none;
	}

	/* #endif */
	/* #ifdef H5 */
	>>>.tui-checkbox .uni-checkbox-input {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50% !important;
		margin: 0;
	}

	>>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #F82400;
		width: 40rpx;
		height: 40rpx;
		border: none;
	}

	/* #endif */
	.tui-goods-img {
		width: 220rpx;
		height: 220rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}

	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}

	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #f5f5f5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.tui-goods-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-goods-price-gold{
		text-decoration: line-through;
		font-size: 26rpx;
	}

	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}

	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-buy {
		display: flex;
		align-items: center
	}

	.tui-bold {
		font-weight: bold;
		font-size: 30rpx;
	}

	.tui-sub-info {
		max-width: 532rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
		color: #333;
		transform: scale(0.8);
		transform-origin: 100% center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: auto
	}

	.tui-invalid-text {
		width: 66rpx;
		margin-right: 4rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: rgba(0, 0, 0, .3);
		transform: scale(0.8);
		transform-origin: center center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-invalid-pr {
		padding-right: 0 !important;
	}

	.tui-gray {
		color: #B2B2B2 !important;
	}

	.tui-goods-invalid {
		color: #555;
		font-size: 24rpx;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-invalid-ptop {
		padding-top: 40rpx;
	}

	.tui-tabbar-cart {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 999;
	}

	.tui-tabbar-cart::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
 		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-price {
		font-size: 30rpx !important;
	}

	/*猜你喜欢*/
	.tui-youlike {
		padding-left: 12rpx
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
	
	.check-box-group{
		margin-bottom: 200rpx;
	}
	
	.free-money{
		font-size: 10rpx;
	}
	
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)){
	.filter{
		bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
		bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
	}
	}
</style>